<template>
    <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
        <template #operation>
            <a>Publish</a>
        </template>
        <template #expandedRowRender>
            <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
                <template #status>
                  <span>
                    <a-badge status="success"/>
                    Finished
                  </span>
                </template>
                <template #operation>
                  <span class="table-operation">
                    <a>Pause</a>
                    <a>Stop</a>
                    <a-dropdown>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item>Action 1</a-menu-item>
                          <a-menu-item>Action 2</a-menu-item>
                        </a-menu>
                      </template>
                      <a>
                        More
                      </a>
                    </a-dropdown>
                  </span>
                </template>
            </a-table>
        </template>
    </a-table>
</template>
<script lang="ts">
    import {defineComponent} from 'vue';

    const columns = [
        {title: 'Name', dataIndex: 'name', key: 'name'},
        {title: 'Platform', dataIndex: 'platform', key: 'platform'},
        {title: 'Version', dataIndex: 'version', key: 'version'},
        {title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum'},
        {title: 'Creator', dataIndex: 'creator', key: 'creator'},
        {title: 'Date', dataIndex: 'createdAt', key: 'createdAt'},
        {title: 'Action', key: 'operation', slots: {customRender: 'operation'}},
    ];

    interface DataItem {
        key: number;
        name: string;
        platform: string;
        version: string;
        upgradeNum: number;
        creator: string;
        createdAt: string;
    }

    const data: DataItem[] = [];
    for (let i = 0; i < 3; ++i) {
        data.push({
            key: i,
            name: 'Screem',
            platform: 'iOS',
            version: '10.3.4.5654',
            upgradeNum: 500,
            creator: 'Jack',
            createdAt: '2014-12-24 23:12:00',
        });
    }

    const innerColumns = [
        {title: 'Date', dataIndex: 'date', key: 'date'},
        {title: 'Name', dataIndex: 'name', key: 'name'},
        {title: 'Status', key: 'state', slots: {customRender: 'status'}},
        {title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum'},
        {
            title: 'Action',
            dataIndex: 'operation',
            key: 'operation',
            slots: {customRender: 'operation'},
        },
    ];

    interface innerDataItem {
        key: number;
        date: string;
        name: string;
        upgradeNum: string;
    }

    const innerData: innerDataItem[] = [];
    for (let i = 0; i < 3; ++i) {
        innerData.push({
            key: i,
            date: '2014-12-24 23:12:00',
            name: 'This is production name',
            upgradeNum: 'Upgraded: 56',
        });
    }

    export default defineComponent({
        components: {
        },
        setup() {
            return {
                data,
                columns,
                innerColumns,
                innerData,
            };
        },
    });
</script>
